<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>css选择器</title>
    <style>
        /* 1.元素选择器（E）  通过标签名来选择元素 */
        div{
            width: 200px;
            height: 300px;
            /* 粗细  实线样式  颜色 */
            border: 2px solid blue;
        }

        /* 2.类选择器（.classname） 通过class的属性值来选择元素 */
        .p1{
            color: red;
        }
        .pp{
            background-color: lightblue;
        }

        /* 3.id选择器（#id） 通过id属性值选择元素 */
        #hh1{
            color: seagreen;
        }

        /* 4.后代选择器（E 空格F） 选择E元素下所有的F选择器，无论是子元素还是子孙元素 */
        /* ul li{
            color: lightseagreen;
        } */
        .p1 span{
            color: limegreen;
        }

        /* 5.子元素选择器（E>F） 选择E元素的直接子元素F */
        /* .p1>span{
            color: limegreen;
        } */

        /* 6.相邻兄弟选择器（E+F） 具有相同父元素，选择E后面紧挨着的F元素 */
        /* .u1+li{
            color: rebeccapurple;
        } */

        /* 7.通用兄弟选择器（E~F）, CSS3新增加一种选择器,具有相同父元素，选择E后面所有的F元素 */
        /* .u1~li{
            color: rebeccapurple;
        } */
    </style>
</head>
<body>
    <div></div>

    <p class="p1">
        <span>11111</span>
        <a>
            <span>5555</span>
        </a>
    </p>
    <p class="pp p2">222222222</p>
    <p class="pp p3">333333333</p>

    <h1 id="hh1">今天星期五</h1>
    <h1 id="hh2">明天星期六</h1>

    <ul class="u1">
        <li>AAAAAAAAAAAAAAAA
            <ul class="u2">
                <li>BBBBBBBBBBBBBBBBBBBBB</li>
                <li>BBBBBBBBBBBBBBBBBBBBB</li>
                <li>BBBBBBBBBBBBBBBBBBBBB</li>
            </ul>
        </li>
        <li>AAAAAAAAAAAAAAAA</li>
        <li>AAAAAAAAAAAAAAAA</li>
    </ul>
    <li>CCCCCCCCCCCCCCCCCC</li>
    <li>CCCCCCCCCCCCCCCCCC</li>
    <li>CCCCCCCCCCCCCCCCCC</li>
</body>
</html>